<template>
  <div class="box">
    <el-row align="middle" :gutter="10">
      <el-col :xs="{ span: 20, offset: 2 }" :sm="{ span: 6, offset: 9 }">
        <div class="login" v-if="isShow">
              <div class="head">图书管理系统登陆</div>
              <el-space fill >
                <div>
                    <el-input
                    v-model="login.accounts"
                    class="w-50 m-2"
                    placeholder="请输入用户名"
                    :prefix-icon="User"
                  >
                  </el-input>
                </div>
                <div>
                    <el-input
                    v-model="login.password"
                    class="w-50 m-2"
                    placeholder="请输入密码"
                    type="password"
                    :prefix-icon="Lock"
                  />
                </div>     
              </el-space>
              <div class="btn-box">
                <el-button @click="changeShow"  type="info" plain>注册</el-button>
                <el-button  type="primary" @click="userLogin" plain>确定登陆</el-button>
              </div>
        </div>
        <div class="login" v-if="!isShow">
              <div class="head">图书管理系统注册</div>
              <el-space fill >
                <div>
                    <el-input
                    v-model="register.accounts"
                    class="w-50 m-2"
                    placeholder="请输入用户名"
                    :prefix-icon="User"
                  >
                  </el-input>
                </div>
                <div>
                    <el-input
                    v-model="register.password"
                    class="w-50 m-2"
                    placeholder="请输入密码"
                    type="password"
                    :prefix-icon="Lock"
                  />
                </div>  
                  <el-select v-model="register.school" class="m-2" placeholder="请选择学校" size="large">
                    <el-option
                    v-for="item in schoolOption"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                    />
                </el-select>
                <el-select v-model="register.class" class="m-2" placeholder="请选择班级" size="large">
                    <el-option
                    v-for="item in classOption"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                    />
                </el-select>     
                <el-select v-model="register.sex" class="m-2" placeholder="请选择性别" size="large">
                    <el-option
                    v-for="item in sexOption"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                    />
                </el-select>  
              </el-space>
              <div class="btn-box">
                <el-button @click="changeShow"  type="info" plain>返回</el-button>
                <el-button  type="primary" @click="userRegister" plain>确定注册</el-button>
              </div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>
<script lang="ts" setup>
import userApiFun from '../../hooks/User/userApiFun';
import { ElLoading, ElMessage   } from 'element-plus';
import { reactive, ref } from 'vue';
import router from "../../router/index";

interface limitRegister {
    accounts: string,
    password: string,
    school: string,
    sex: string,
    class: string
}

interface limitLogin {
    accounts: string,
    password: string
}

const isShow = ref<boolean>(true);

const registerUrl = '/user/register';

const loginUrl = '/user/userLogin';


const schoolOption = [
  {
    value: '湖南信息学院',
    label: '湖南信息学院',
  }
]

const sexOption = [
  {
    value: 0,
    label: '男',
  },
  {
    value: 1,
    label: '女',
  }
]
const classOption = [
  {
    value: '网络工程一班',
    label: '网络工程一班',
  },
]


const register = reactive<limitRegister>({
    accounts: '',
    password: '',
    school: '',
    sex: '',
    class: ''
})

const login = reactive<limitLogin>({
    accounts: '',
    password: ''
})



const changeShow = ():void => {
    isShow.value = !isShow.value
}

const userRegister = async () => {
    const loading = ElLoading.service({
          lock: true,
          text: "Loading",
          fullscreen: false,
          background: "rgba(0, 0, 0, 0.7)",
      });
    try {
        register.sex = parseInt(register.sex)
        const res:any = await userApiFun(register,registerUrl);
        if (res.data.status !== 200) return ElMessage.error(res.data.message);
        ElMessage.success('注册成功，请登陆');
        isShow.value = !isShow.value
    } catch (e: any) {
        return ElMessage.error('注册失败');
    } finally {
        loading.close();
    }
}

const userLogin = async () => {
    const loading = ElLoading.service({
          lock: true,
          text: "Loading",
          fullscreen: false,
          background: "rgba(0, 0, 0, 0.7)",
      });
    try {
        const res:any = await userApiFun(login,loginUrl);
        console.log(res)
        if (res.data.status !== 200) return ElMessage.error(res.data.message);
        ElMessage.success('登陆成功');
        window.localStorage.setItem('userInfo',JSON.stringify(res.data.data))
        window.localStorage.setItem('token',res.data.token)
        router.push('/')
    } catch (e: any) {
      console.log(e)
        return ElMessage.error('登陆失败');
    } finally {
        loading.close();
    }
}



</script>
<style lang="scss" scoped>
@import './User.scss';
</style>